<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>用户数据展示</title>
    <link rel="stylesheet" th:href="@{/frame/vendors/mdi/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/frame/vendors/base/vendor.bundle.base.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        #container {
            width: 100%;
            height: 400px;
        }
    </style>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=57813467d33539f9fbd02aeac3960143"
            type="text/javascript"></script>
</head>

<body>
<div class="container-scroller">
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" th:href="@{/index}">
                    <h1>
                        <span class="display-4" th:text="${session.user.getUserName()}+'欢迎!'"></span>
                    </h1>
                </a>
                <button class="navbar-toggler navbar-toggler align-self-center" data-toggle="minimize" type="button">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
            <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item nav-profile dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="profileDropdown">
                        <img alt="profile" th:src="@{/img/head.jpg}">
                        <span class="nav-profile-name" th:text="${session.user.getUserName()}"></span>
                    </a>
                    <div aria-labelledby="profileDropdown" class="dropdown-menu dropdown-menu-right navbar-dropdown">
                        <a class="dropdown-item" th:href="@{/user/setting}">
                            <i class="mdi mdi-settings text-primary"></i>
                            设置
                        </a>
                        <a class="dropdown-item" th:href="@{/loginout}">
                            <i class="mdi mdi-logout text-primary"></i>
                            登出
                        </a>
                    </div>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" data-toggle="offcanvas"
                    type="button">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <div class="container-fluid page-body-wrapper">
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/index}">
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">主页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/user/bindcenter}">
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">设备绑定中心</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/user/cars}">
                        <i class="mdi mdi-grid-large menu-icon"></i>
                        <span class="menu-title">设备中心</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/user/setting}">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">用户中心</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title clearfix">火焰红外传感器实时</h4>
                                <div class="clearfix" id="Fi"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title clearfix">温度传感器实时</h4>
                                <div class="clearfix" id="Tem"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title clearfix">湿度传感器实时</h4>
                                <div class="clearfix" id="Hum"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">地理位置信息显示</h4>
                                <div id="container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/frame/vendors/base/vendor.bundle.base.js}"></script>
<script th:src="@{/frame/vendors/chart.js/Chart.min.js}"></script>
<script th:src="@{/frame/vendors/datatables.net/jquery.dataTables.js}"></script>
<script th:src="@{/frame/vendors/datatables.net-bs4/dataTables.bootstrap4.js}"></script>
<script th:src="@{/js/off-canvas.js}"></script>
<script th:src="@{/js/hoverable-collapse.js}"></script>
<script th:src="@{/js/template.js}"></script>
<script th:src="@{/js/dashboard.js}"></script>
<script th:src="@{/js/data-table.js}"></script>
<script th:src="@{/js/jquery.dataTables.js}"></script>
<script th:src="@{/js/dataTables.bootstrap4.js}"></script>
<script th:src="@{/js/echarts.js}"></script>
<script>
    let ws = new WebSocket("ws://" + window.location.host + "/Charts");
    ws.onopen = () => {
        ws.send(window.location.href.split("/")[window.location.href.split("/").length - 1]);
    };
    var map = new AMap.Map('container', {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        zoom: 17,
        pitch: 60,
        rotation: -15,
        viewMode: '3D',//开启3D视图,默认为关闭
        buildingAnimation: true,//楼块出现是否带动画

        expandZoomRange: true,
        zooms: [3, 20],
        resizeEnable: true, //是否监控地图容器尺寸变化
        mapStyle: "amap://styles/fresh"
    });

    var myChartFi = echarts.init(document.getElementById('Fi'), null, {
        height: 400
    });
    var myChartTem = echarts.init(document.getElementById('Tem'), null, {
        height: 400
    });
    var myChartHum = echarts.init(document.getElementById('Hum'), null, {
        height: 400
    });
    ws.onmessage = (e) => {
        var dataStr = e.data;
        //将dataStr 转换为json对象
        var res = JSON.parse(dataStr);
        switch (res.type) {
            case "Fi": {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    xAxis: {
                        type: 'category',
                        data: res.time
                    },
                    yAxis: {
                        minInterval: 1,
                        type: 'value'
                    },
                    series: [
                        {
                            name: '火焰指标',
                            data: res.value,
                            type: 'line',
                            smooth: true,
                            markLine: {
                                data: [
                                    {type: 'average', name: 'Avg'},
                                    [
                                        {
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        },
                                        {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: 'Max'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }
                                    ]
                                ]
                            }
                        }
                    ],
                    visualMap: {
                        top: 10,
                        right: 10,
                        pieces: [{
                            gt: 0,
                            lte: 300,
                            color: '#096'
                        }, {
                            gt: 300,
                            lte: 450,
                            color: '#ffde33'
                        }, {
                            gt: 450,
                            lte: 600,
                            color: '#ff9933'
                        }, {
                            gt: 600,
                            lte: 750,
                            color: '#cc0033'
                        }, {
                            gt: 750,
                            lte: 900,
                            color: '#660099'
                        }, {
                            gt: 900,
                            color: '#7e0023'
                        }],
                        outOfRange: {
                            color: '#999'
                        }
                    },
                };
                myChartFi.setOption(option);
                break;
            }
            case "tem": {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    xAxis: {
                        type: 'category',
                        data: res.time
                    },
                    yAxis: {
                        minInterval: 1,
                        type: 'value'
                    },
                    series: [
                        {
                            name: '温度指标',
                            data: res.value,
                            type: 'line',
                            smooth: true,
                            markLine: {
                                data: [
                                    {type: 'average', name: 'Avg'},
                                    [
                                        {
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        },
                                        {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: 'Max'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }
                                    ]
                                ]
                            }
                        }
                    ],
                    visualMap: {
                        top: 10,
                        right: 10,
                        pieces: [{
                            gt: 0,
                            lte: 40,
                            color: '#096'
                        }, {
                            gt: 40,
                            lte: 50,
                            color: '#ffde33'
                        }, {
                            gt: 50,
                            lte: 60,
                            color: '#ff9933'
                        }, {
                            gt: 60,
                            lte: 70,
                            color: '#cc0033'
                        }, {
                            gt: 70,
                            lte: 80,
                            color: '#660099'
                        }, {
                            gt: 80,
                            color: '#7e0023'
                        }],
                        outOfRange: {
                            color: '#999'
                        }
                    },
                };
                myChartTem.setOption(option);
                break;
            }
            case "hum": {
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    xAxis: {
                        type: 'category',
                        data: res.time
                    },
                    yAxis: {
                        minInterval: 1,
                        type: 'value'
                    },
                    series: [
                        {
                            name: '湿度指标',
                            data: res.value,
                            type: 'line',
                            smooth: true,
                            markLine: {
                                data: [
                                    {type: 'average', name: 'Avg'},
                                    [
                                        {
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        },
                                        {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: 'Max'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }
                                    ]
                                ]
                            }
                        }
                    ],
                    visualMap: {
                        top: 10,
                        right: 10,
                        pieces: [{
                            gt: 0,
                            lte: 50,
                            color: '#096'
                        }, {
                            gt: 50,
                            lte: 60,
                            color: '#ffde33'
                        }, {
                            gt: 60,
                            lte: 70,
                            color: '#ff9933'
                        }, {
                            gt: 70,
                            lte: 80,
                            color: '#cc0033'
                        }, {
                            gt: 80,
                            lte: 90,
                            color: '#660099'
                        }, {
                            gt: 90,
                            color: '#7e0023'
                        }],
                        outOfRange: {
                            color: '#999'
                        }
                    },
                };
                myChartHum.setOption(option);
                break;
            }
            case "location": {
                for (let i = 0; i < res.value.length; i++) {
                    let lon = JSON.parse(res.value[0]).lon;
                    let lat = JSON.parse(res.value[0]).lat;
                    $.get(
                        'https://restapi.amap.com/v3/assistant/coordinate/convert?locations='
                        + lon + ',' + lat + '&coordsys=gps&output=json&key=57813467d33539f9fbd02aeac3960143',
                        function (r) {
                            let tmp = r.locations.split(",")
                            lon = tmp[0];
                            lat = tmp[1];
                            if (i == 1) map.panTo([lon, lat]);
                            var circle = new AMap.Circle({
                                center: new AMap.LngLat(lon, lat), // 圆心位置
                                radius: 10,  //半径
                                strokeColor: "#00479f",  //线颜色
                                strokeOpacity: 1,  //线透明度
                                strokeWeight: 3,  //线粗细度
                                fillColor: "#00b6ee",  //填充颜色
                                fillOpacity: 0.05 //填充透明度
                            });
                            map.add(circle);
                        }
                    )

                }
                break;
            }
        }

        console.log(e.data)
    };

</script>
</body>

</html>
